<!DOCTYPE HTML>
<html>
	<head>
		<link rel="icon" type="image/png" href="resources/images/favicon.png">
		<link href="resources/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
		<link href="resources/css/bootstrap-switch.css" rel="stylesheet">
		<style type="text/css">

			.sidebar-nav {
				padding: 9px 0;
			}

			/* Sticky footer styles
			-------------------------------------------------- */

			html,
			body {
				height: 100%;
				/* The html and body elements cannot have any padding or margin. */				
			}

			/* Wrapper for page content to push down footer */
			#wrap {
				min-height: 100%;
				/*height: auto !important;*/
				height: 100%;
				/* Negative indent footer by it's height */
				/*margin: 0 auto -75px;*/
			}

			/* Set the fixed height of the footer here */
			#push,
			#footer {
				height: 75px;
			}
			#footer {
			}

			/* Custom page CSS
			-------------------------------------------------- */
			/* Not required for template or sticky footer method. */

			.container {
				width: auto;
				max-width: 680px;
				height: 100%;
			}

			.fill {
				min-height: 100%;
				height: 100%;
			}

			#wrap > .container-fluid {
				padding-top: 60px;
			}
			.container .credit {
				margin: 20px 0;
			}

			/* Lastly, apply responsive CSS fixes as necessary */
			@media (max-width: 767px) {
				#footer {
					margin-left: -20px;
					margin-right: -20px;
					padding-left: 20px;
					padding-right: 20px;
				}
				#wrap > .container-fluid {
					padding-top: 0px;
				}
			}

			@media (max-width: 980px) {
				/* Enable use of floated navbar text */
				.navbar-text.pull-right {
					float: none;
					padding-left: 5px;
					padding-right: 5px;
				}
				#wrap > .container-fluid {
					padding-top: 0px;
				}
			}


		</style>
<!-- <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> -->
	 	<link href="resources/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
		<link href="resources/css/font-awesome.css" rel="stylesheet">
		<!-- custom -->
		<link href="resources/css/main.css" rel="stylesheet" />
		<link href="resources/css/chatbox.css" rel="stylesheet" />
		
		<script src="resources/js/jquery-1.9.1.js"></script>
		<script src="resources/js/jquery-ui.min.js"></script>
		<script src="resources/js/bootstrap.js"></script>
		<script src="resources/js/bootstrap-switch.js"></script>
		<script src="resources/js/moment.min.js"></script>
		<script src="resources/js/livestamp.min.js"></script>
		<!--script src="resources/js/hammer.min.js"></script>
		<script src="resources/js/dragend-0.2.0_rc2.js"></script-->
		<!-- custom -->		
		<script src="resources/js/chatbox.js" type="text/javascript"></script>
		<script src="resources/js/telscale-rtm.js" type="text/javascript"></script>
		<script src="resources/js/jain-sip.js" type="text/javascript"></script> 
        	<script src="resources/js/WebRTComm.js" type="text/javascript"></script>  
	        <script src="resources/js/TelScaleRTMController.js" type="text/javascript"></script>        
   		<script>
   		mobicentsWebRTCPhoneController = new MobicentsWebRTCPhoneController(this);
   		</script>
		<title>TelScale RTM</title>
	</head>
	<body onunload='mobicentsWebRTCPhoneController.onUnloadViewEventHandler();'>
		<div id="wrap">
			<div class="navbar navbar-inverse navbar-fixed-top">
				<div class="navbar-inner">
					<div class="container-fluid">
						<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<span class="brand" style="vertical-align: bottom;"><img src="resources/images/telestax-logo-dark.png" />Room</span>
						<div class="nav-collapse collapse">
							<p class="navbar-text pull-right" style="font-size: 1.2em;">
								<span id="user" style="margin-top: 15px; vertical-align: sub;">
									<i class="icon-user"></i> <a id="username" href="#" class="navbar-link">John Doe</a>
								</span>
								 &nbsp; <span id="unregister"><a href="#"  onclick="mobicentsWebRTCPhoneController.onClickDisconnectButtonViewEventHandler();" class="btn btn-danger btn-small"><i class="icon-off"></i> Sign Out</a></span>
							</p>
						</div><!--/.nav-collapse -->
					</div>
				</div>
			</div>
			<div class="container-fluid" style="height:79%">
				<div class="row-fluid fill">				
					<div id="registration" class="container">
					</div>						
					<div id="room" class="fill">
					</div>	
					<script type="text/javascript">						
						$(document).ready(function () {
							// Load modules
							$('#room').load('modules/room.html');
							$('#user').hide();
							$('#unregister').hide();
							//$('#left-sidebar').hide();
							$('#room').hide();
							$('#registration').load('modules/register.html', function() {
								mobicentsWebRTCPhoneController.onLoadViewEventHandler();
							});							
						});
					</script>
				</div>			
			</div>
		</div>
		<!--div id="footer">
		</div>

					<div class="modal hide fade" id="callModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		                <div class="modal-header">
		                    
		                    <h3 id="call_message">Incoming Call</h3>
		                </div>	  
		                <div class="modal-footer">
		                    <button class="btn reject-btn" data-dismiss="modal" aria-hidden="true">Reject</button>
		                    <button class="btn btn-primary accept-btn" data-dismiss="modal">Accept</button>
		                </div>
		            </div>

		            <div class="modal hide fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		                <div class="modal-header">
		                    
		                    <h3 id="modal_message">Incoming Call</h3>
		                </div>	  
		                <div class="modal-footer">
		                    <button class="btn btn-primary" data-dismiss="modal">OK</button>
		                </div>
		            </div-->
	</body>
</html>
